<template>
	<view class="center">
		<hea-ders title="客户应收款">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<image slot='Rright' src="@/static/images/s36.png" mode="widthFix" @click="screen" @tap="$open('../collection/screen/screen')"></image>
		</hea-ders>
		<view class="lei">
			<view class="kuan">
				<input type="text" value="" placeholder="编码/名称" />
			</view>
			<view class="xia">
				<text>期末</text>
				<text>0</text>
				<view class="fls">
					<view class="number">
						<text class="number_su">期初</text>
						<text>0</text>
					</view>
					<view class="xians"></view>
					<view class="number">
						<text>增加</text>
						<text>0</text>
					</view>
				</view>
			</view>
		</view>
		<view class="select">
			<view class="">
				<label class="radio">
					<radio value="" /><text>显示期末为0</text>
				</label>
			</view>
			<xfl-select class="ri" :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
			 :style_Container="'height: 34rpx; font-size: 20rpx;width:152rpx;padding:0 0 0 10rpx'" :placeholder="'placeholder'"
			 :initValue="'默认排序'">
			</xfl-select>
		</view>
		<view class="kbi">
			<!-- <view class="centers">
				<image src="@/static/images/s20.png" mode="widthFix"></image>
				<text>还没有内容哦</text>
			</view> -->
			<view class="collection_item"  >
				<view class=""@tap="$open('../collection/gathering/gathering')">
					<view class="collection_item_one">
						<text>零售客户</text>
						<text>[WMK20200604003]</text>
					</view>
					<view class="collection_item_two">
						<text style="color: red;">欠款数:￥0</text>
						<text class="text">期末预收:￥0</text>
					</view>
					<view class="collection_item_two">
						<text>信用额度:￥0</text>
						<text class="text">可用额度:￥0</text>
					</view>
					<view class="collection_item_two">
						<text>初期应收:￥0</text>
						<text class="text">增加应收:￥0</text>
					</view>
					<view class="collection_item_two">
						<text>初期预收:￥0</text>
						<text class="text">增加预收:￥0</text>
					</view>
					
				</view>
				<view class="order">
						<view class="order_item">
							<image v-if="!flag" src="../../../static/images/s37.png" mode="widthFix" @click="flag = !flag" ></image>
						</view>
					<view class="orders" v-if="flag">
						<view class="shijian">
							<text>联系方式：13290789234</text>
							<text>地址：江苏省徐州市泉山区中山南路</text>
						</view>
						<image style="width: 32rpx;" v-if="flag" src="../../../static/images/s1.png" mode="widthFix" @click="flag = !flag"></image>
					</view>
				</view>
				<view class="collection_ites"  @tap="$open('../../shop/collection/money/money')">
					<image src="../../../static/images/788.png" mode=""></image>
					<text>收款</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			xflSelect,
			heaDers
		},
		data() {
			return {
				flag: false,
				list: [ //要展示的数据
					'默认排序',
					'客户名称',
					'欠款金额'
				],
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			screen() {
				uni.navigateTo({
					url: 'screen/screen'
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #fff;
		.tit {
			width: 100%;
			height: 50rpx;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.lei {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;

			.kuan {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					margin-right: 20rpx;
				}

				input {
					width: 100%;
					height: 64rpx;
					background-color: #e0e0e0 !important;
					box-sizing: border-box;
					border-radius: 32rpx;
					padding-left: 70rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 33rpx;
					color: rgba(189, 189, 189, 1);
					opacity: 1;
					background: url(../../../static/images/tb_search.png)no-repeat;
					background-size: 5%;
					background-position: 2% 50%;
				}
			}
		}

		.xia {
			background: rgba(35, 153, 246, 1);
			width: 100%;
			padding: 30rpx 0;
			box-sizing: border-box;

			text {
				display: inline-block;
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 33rpx;
				color: rgba(197, 229, 255, 1);
				opacity: 1;
				box-sizing: border-box;
			}

			.fls {
				margin-top: 20rpx;
				display: flex;
				.number {
					width: 50%;
					.number_su {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 33rpx;
						color: rgba(197, 229, 255, 1);
						opacity: 1;
					}
				}

				.xians {
					background-color: #fff;
					width: 0.5%;
				}
			}
		}

		.select {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 10rpx 20rpx;

			text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			radio {
				transform: scale(0.7);
			}

			.ri {
				width: 40%;
			}
		}

		.kbi {
			width: 100%;
			height: 52%;
			overflow-y: scroll;
			background-color: rgba(245, 245, 245, 1);
			.centers {
				margin-top: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 200rpx;
					margin: 0 auto;
				}

				text {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 45rpx;
					color: rgba(183, 183, 183, 1);
					opacity: 1;
				}
			}

			.collection_item {
				margin-top: 21rpx;
				background: #fff;

				.collection_item_one {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 19rpx 30rpx 10rpx 30rpx;

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}
				.shijian text{
					display: block;
					padding-left: 30rpx;
				}
				.collection_item_two {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					display: flex;
					align-items: center;
					padding: 0 30rpx 10rpx 30rpx;

					text {
						width: 47%;
					}
					.text {
						margin-left: 0%;
						color: #616161;
					}
				}
				.collection_ites{
					display: flex;
					justify-content: center;
					border-top: 1px solid #F5F5F5;
					align-items: center;
					padding: 12rpx 0rpx;
					text{
						font-size: 28rpx;
						font-family:PingFang SC;
						color: #2399F6;
						padding-left: 10rpx;
					}
					image{
						width: 24rpx;
						height: 24rpx;
					}
				}
				.order{
					image {
						width: 32rpx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						padding:0 30rpx 5rpx 0 ;
					}
					.order_item{
						display: flex;
						justify-content: flex-end;
					}
					.orders {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.shijian {
							display: flex;
							flex-direction: column;
							text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 33rpx;
								color: rgba(97, 97, 97, 1);
								opacity: 1;
							}
						}
						
					}
					
				}
						
			}
		}
	}
</style>
